<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link href="css/mui.min.css" rel="stylesheet" />
		<!--标准js-->
		<script src="js/mui.min.js"></script>
		<style type="text/css">
			#scanner {
				width: 100%;
				height: 481px;
				/*屏幕高度-（状态栏高度+标题栏高度+低栏高度）*/
				position: absolute;
				top: 44px;
				text-align: center;
			}
			
			.Horizontal {
				position: relative;
				display: table-cell;
				height: 100%;
			}
			
			.foot-tab {
				position: fixed;
				bottom: 0px;
				z-index: 25565;
				width: 100%;
				height: 92px;
				padding: 2px;
			}
			
			textarea {
				float: left;
				background-color: inherit;
				border-color: #333;
				color: darkgray;
				width: 80%;
				height: 98%;
			}
			
			.mui-btn {
				margin-left: 3px;
				height: 88%;
				width: 90%;
				border-color: #333;
			}
		</style>
	</head>

	<body style="background-color: black;">
		<header class="mui-bar mui-bar-nav" style="background-color: rgba(0,0,0,0.5);box-shadow: none;z-index: 10;">
			<a class="mui-icon mui-icon-back mui-pull-left" style="color: darkgray;" onclick="javascript:mui.back();return false;"></a>
			<h1 class="mui-title" style="color: darkgray;">扫描网址二维码添加书签</h1>
		</header>
		<nav class="foot-tab">
			<textarea id="scanresult" class="Horizontal" placeholder="可手动输入文章网址添加书签 (注：仅支持阅读页识别)"></textarea>
			<div class="Horizontal">
				<button id="enter" type="button" class="Horizontal mui-btn mui-btn-outlined">确认</button>
				<button id="clear" type="button" class="Horizontal mui-btn mui-btn-outlined">清空</button>
			</div>
		</nav>
		<div id="scanner">
			<div style="height: 50%;"></div>
			<div>...加载中...</div>
		</div>
	</body>
	<script type="text/javascript">
		mui.init();
		var scan;
		mui.plusReady(function() { //Android沉浸式状态栏设置
			if(plus.navigator.isImmersedStatusbar()) { //判断设备是否支持
				var ImmerseHeight = Math.round(plus.navigator.getStatusbarHeight());
				document.body.setAttribute("class", "mui-fullscreen");
				document.querySelector("#scanner").style.height = plus.screen.resolutionHeight - ImmerseHeight - 136 + "px";
				document.querySelector("#scanner").style.top = ImmerseHeight + 44 + "px";
				document.querySelector(".mui-bar-nav").style.top = ImmerseHeight + "px";
			}
			
			if(scan){}else{newscan();}
		});

		function newscan() {
			scan = new plus.barcode.Barcode('scanner', [plus.barcode.QR], {
				frameColor: '#00FF00',
				scanbarColor: '#00FF00'
			});
			scan.onmarked = onmarked;
			scan.start({
				conserve: false, //是否保存扫描的二维码图片
				filename: "/storage/emulated/0/EasyReader/barcode/"
			});
		}

		// 二维码扫描成功(这里可以写扫描成功后的处理方法)
		function onmarked(type, result, file) {
			switch(type) {
				case plus.barcode.QR:
					type = "QR";
					break;
				case plus.barcode.EAN13:
					type = "EAN13";
					break;
				case plus.barcode.EAN8:
					type = "EAN8";
					break;
				default:
					type = "其它" + type;
					break;
			}
			document.querySelector("#scanresult").value = result;
		}

		mui('.foot-tab').on('tap', '.mui-btn', function(event) {
			if(this.id == "enter") {
				if(document.getElementById("scanresult").value == "") {
					mui.toast("无内容")
					return;
				}
				var homePage = plus.webview.currentWebview().opener();
				mui.fire(homePage, 'setbookmarker', document.getElementById("scanresult").value);
				mui.back();
			}
			if(this.id == "clear") {
				document.getElementById("scanresult").value = "";
				if(scan) scan.start();
			}
		});
		//监听窗口尺寸变化事件（变相监听软键盘弹出）
		function scanChange(){
			if(document.body.scrollHeight < 600) {
				if(scan) scan.close();
			} else {
				document.getElementById("scanresult").blur();
				newscan();
			}
		}
		window.addEventListener("resize", scanChange, false);
		//关闭窗口前先关闭二维码扫描控件
		mui.back = function() {
			window.removeEventListener("resize",scanChange);
			if(scan) scan.close();
			document.getElementById("scanresult").blur();
			plus.webview.currentWebview().close();
		}
	</script>
</html>